﻿@namespace AntDesign

<Dialog Config="@GetDialogOptions()" Visible="@_visible">
    <ChildContent>
        <div class="ant-image-preview-img-wrapper" @onwheel="WeelHandZoom"
             style="font-size:0; position: relative; height: 100%; width: 100%;">
            <img id="preview-img" @ref="_previewImg" class="ant-image-preview-img" src="@ImageRef.ImageSrc"
                 style="position: absolute; left: @_left; top: @_top; transform: translate(-50%, -50%) scale3d(@_zoomOutTimes, @_zoomOutTimes, 1) rotate(@(90*_rotateTimes)deg);">
        </div>

        @if (ImageRef.ImageCount > 1)
        {
            <div class="ant-image-preview-switch-left @(ImageRef.CurrentIndex==0?"ant-image-preview-switch-left-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex-1)" @onclick:stopPropagation>
                <Icon Type="left" />
            </div>
            <div class="ant-image-preview-switch-right @(ImageRef.CurrentIndex==ImageRef.ImageCount-1?"ant-image-preview-switch-right-disabled":"")" @onclick="()=>ImageRef.SwitchTo(ImageRef.CurrentIndex+1)" @onclick:stopPropagation>
                <Icon Type="right" />
            </div>
        }
    </ChildContent>
    <AdditionalContent>
        <div class="ant-image-preview-operations-wrapper">
            <ul class="ant-image-preview-operations">
                @if (ImageRef.ImageCount > 1)
                {
                    <li class="ant-image-preview-operations-progress">@(ImageRef.CurrentIndex + 1) / @ImageRef.ImageCount</li>
                }
                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close" @onclick="HandleClose" @onclick:stopPropagation>
                    <Icon Type="close" Class="ant-image-preview-operations-icon" />
                </li>
                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn" @onclick="HandleZoomIn" @onclick:stopPropagation>
                    <Icon Type="zoom-in" Class="ant-image-preview-operations-icon" />
                </li>
                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut @(_zoomOutTimes==1?"ant-image-preview-operations-operation-disabled":"")" @onclick="HandleZoomOut" @onclick:stopPropagation>
                    <Icon Type="zoom-out" Class="ant-image-preview-operations-icon" />
                </li>
                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight" @onclick="HandleRotateRight" @onclick:stopPropagation>
                    <Icon Type="rotate-right" Class="ant-image-preview-operations-icon" />
                </li>
                <li class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft" @onclick="HandleRotateLeft" @onclick:stopPropagation>
                    <Icon Type="rotate-left" Class="ant-image-preview-operations-icon" />
                </li>
            </ul>
        </div>
    </AdditionalContent>
</Dialog>